<template>
  <div class="container" style="padding: 0;margin: 0;">
    <div class="grid-container">
      <div class="row row-1">
        <div class="w_full flex-col">
          <span class="title">培训列表</span>
          <div class="flex-row comm_border" style="height: 80px;margin-top: 16px;">
            <div class="w_full flex-row-center">
              <span class="label_title" style="margin-left: 24px">时间</span>
              <el-date-picker v-model="data.dtStart"
                              type="date"
                              placeholder="请输入日期"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              size="large" class="date-picker"
                              style="margin-left: 12px"></el-date-picker>
              <span style="margin-left: 12px">至</span>
              <el-date-picker
                  type="date"
                  placeholder="请输入日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  v-model="data.dtEnd" size="large" class="date-picker"
                  style="margin-left: 12px"></el-date-picker>

            </div>
            <div class="flex-row-center">
              <el-button class="search_btn_primary" type="primary" @click="click_search" style="margin-right: 24px;width: 88px;height: 44px">查询
              </el-button>
            </div>
          </div>
          <div class="flex-row-center" style="margin-top: 16px; height:80px;justify-content: space-between">
            <el-button style="width:114px;height: 48px;border-radius: 12px" type="primary" :icon="Plus"
                       @click="click_create">创建
            </el-button>
            <el-input placeholder="请输入" v-model="data.searchName"
                      style="width:412px;height: 48px;border-radius: 12px"
                      :prefix-icon="Search"></el-input>
          </div>
        </div>
      </div>
      <div class="row row-2 full">
        <div class="scrollable-content full">
          <div class="flex_1" style="margin: 0">
            <el-table :data="data.listTrain" border>
              <el-table-column prop="index" label="序号" width="60"/>
              <el-table-column prop="trainingName" label="课程名称"/>
              <el-table-column prop="startTimeStr" label="培训开始时间" width="200"/>
              <el-table-column prop="endTimeStr" label="培训结束时间" width="200"/>
              <el-table-column prop="trainingTime" label="培训时长" width="200"/>
              <el-table-column prop="teacher" label="授课人员" width="200"/>
              <el-table-column prop="trainingCount" label="培训人数" width="100"/>
              <el-table-column label="操作" width="120px">
                <template #default="scope">
                  <el-button link size="small" @click="click_sign(scope.$index, scope.row)">签到码
                  </el-button>
                  <el-button link size="small" @click="click_userList(scope.$index, scope.row)">查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="row row-3 w_full">
        <div class="flex-row-center w_full"
             style="flex-direction: row-reverse ;margin-top: 14px;height: 50px;">
          <el-pagination
              v-model:current-page="pager.currentPage"
              v-model:page-size="pager.pageSize"
              :page-sizes="[10,20,30,50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pager.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, shallowRef} from "vue";
import {Plus, Search} from "@element-plus/icons-vue";
import {ElNotification} from "element-plus";
import {tickAsTimeString, timeStrAsTick} from "@/utils/TimeUtil";
import {api_deleteExam} from "@/request/apis/examApi";
import {ExamVO} from "@/type/vo/ExamVO";
import {addDialog} from "@/components/gDialog/index";
import router from "@/router";
import msg from "@/components/msg";
import ExamPublish from "@/views/Exam/dialogs/ExamPublish.vue";
import {api_listTrain} from "@/request/apis/trainApi";
import {TrainingLessonsInfoVO} from "@/type/vo/TrainingLessonsInfoVO";
import TrainSignDialog from "@/views/Train/Dialogs/TrainSignDialog.vue";


const data = reactive({
  dtStart: '',
  dtEnd: '',
  searchName: '',
  selectStatus: -1,
  listTrain: Array<TrainingLessonsInfoVO>(),
  ansCount: 10,
})
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})


onMounted(async () => {
  await search_pri();
})

const click_userList = (index: number, row: TrainingLessonsInfoVO) => {
  router.push({
    path: '/trainUserListView',
    query: {
      trainingId: row.trainingId
    }
  })
}
const click_sign = (index: number, row: TrainingLessonsInfoVO) => {
  try {
    //跳转到创建
    // router.push('/addTrainView');
    addDialog({
      title: "签到码",
      component: shallowRef(TrainSignDialog),
      width: "600px",
      props: {
        trainId: row.trainingId,
        trainName: row.trainingName,
      },
      callBack: (dRet: boolean, examId: string) => {

      }
    })
  } catch (error) {
    // 处理取消操作
  }
}




const click_create = () => {
  try {
    //跳转到创建
    router.push('/addTrainView');
    // addDialog({
    //   title: "请输入名称",
    //   component: shallowRef(Add),
    //   width: "800px",
    //   props: {},
    //   callBack: (dRet: boolean, examId: string) => {
    //     console.log('dRet', dRet);
    //     console.log('name', examId);
    //     if (dRet) {
    //       //跳转页面
    //       router.push({
    //         path: '/examEditView',
    //         query: {
    //           examId: examId
    //         }
    //       })
    //       // ElMessage(`创建成功!!${name}`);
    //       return;
    //     } else {
    //       // tableList.data[index as number] = data
    //     }
    //     console.log(data, "data")
    //   }
    // })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }

}

const click_publish = (exam: ExamVO) => {
  try {
    addDialog({
      title: "发布考试",
      component: shallowRef(ExamPublish),
      width: "600px",
      props: {examId: exam.examId},
      callBack: async (dRet: boolean) => {
        if (dRet) {
          await click_search();
        }
      }
    })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }
}
const click_delete = async (exam: ExamVO) => {
  try {
    const rDialog = await msg.yesNo(
        `是否确认删除考试 ${exam.title}?`,
        '警告'
    );
    if (rDialog) {
      const r = await api_deleteExam(exam.examId);
      if (!r) {
        await msg.info('数据异常');
        return;
      }
      if (r.code != 0) {
        await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
        return;
      }
      await search_pri();
      ElNotification({
        title: '提示',
        message: '已删除!',
      })
    }
  } catch (error) {
    // 处理取消操作
  }
}

const search_pri = async () => {
  console.log('dtStart', data.dtStart);
  data.listTrain.length = 0;
  const limit = pager.pageSize;
  const page = pager.currentPage;
  // }
  let status = 0;
  if (data.selectStatus > 0) {
    status = data.selectStatus;
  }
  let startDate = data.dtStart;
  if (startDate == null)
    startDate = '';

  let dtEnd = data.dtEnd;
  if (dtEnd == null)
    dtEnd = '';

  let trainingName = data.searchName;
  let trainingTeacher = "";
  const r = await api_listTrain(
      trainingName,
      startDate,
      dtEnd,
      trainingTeacher,
      page,
      limit);
  if (!r) {
    await msg.info('数据异常');
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`);
    return;
  }
  if (r.data.records) {
    for (let i = 0; i < r.data.records.length; i++) {
      r.data.records[i].index = i + 1;
      r.data.records[i].createTimeStr = tickAsTimeString(r.data.records[i].createTime)
      r.data.records[i].startTimeStr = tickAsTimeString(r.data.records[i].startTime)
      r.data.records[i].endTimeStr = tickAsTimeString(r.data.records[i].endTime)
      r.data.records[i].trainingCount = r.data.records[i].trainingCount | 0;
    }
  }

  data.listTrain = r.data.records;
  pager.total = r.data.total;
}

const click_search = async () => {
  await search_pri();
};

const handleSizeChange = async (val: number) => {
  await search_pri();
}
const handleCurrentChange = async (val: number) => {
  await search_pri();
}

</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-1,
.row-3 {
}

.row-2 {
  overflow: auto;
}

.scrollable-content {

  line-height: 1.5em;
}


.title {
  font-size: 24px;
  font-weight: 600;
  color: #0A1629;
  line-height: 28px;
}

.label_title {
  font-size: 16px;
  font-weight: 400;
  color: #595959;
  line-height: 24px;
}

.date-picker {
  height: 48px;
  color: black;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #DCDCDC;
}

.el-scrollbar__view {
  height: calc(100% - 100px); /* 根据实际情况调整高度 */
}

.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  margin: 10px;
  color: var(--el-color-primary);
  overflow: hidden;
}

.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.naireName {
  font-size: 20px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
}

.status {
  font-size: 16px;
  font-weight: 400;
  color: #0A1629;
  line-height: 24px;
  margin-left: 7px;
}

.btn1 {
  border: none;
  margin-left: 24px;
  width: auto;

  padding: 0;
}


</style>
